<template>
  <div id="bashbord">

    <el-row>
      <el-row style="margin: 20px 0px 10px 0px">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
      <el-card v-loading="loadingEchart" style="width: 100%;display: inline-block;vertical-align: top;margin-top: 20px;">
        <el-row style="margin-bottom: 10px;">
          <el-col :span="1"><div style="width: 4px;height: 17px;background-color: #409EFF;"></div></el-col>
          <el-col :span="1" style="line-height: 17px;margin-left: -65px;">数据概述</el-col>
        </el-row>
        <el-row style="margin-left: 130px;">
          <el-col :span="4" class="elCol">
            <el-col :span="5">
              <img src="../../assets/img/fwq.png"/>
            </el-col>
            <el-col :span="4" class="marginTop">
              <div class="color">主机</div>
              <div>{{topData.serverNum}}</div>
            </el-col>
          </el-col>

          <el-col :span="4" class="elCol">
            <el-col :span="5">
              <img src="../../assets/img/jq.png"/>
            </el-col>
            <el-col :span="4" class="marginTop">
              <div class="color">集群</div>
              <div>
                <div v-show="topData.clusterState=='notInstall'">未安装</div>
                <div v-show="topData.clusterState=='closed'">已停止</div>
                <div v-show="topData.clusterState=='running'">运行中</div>
              </div>
            </el-col>
          </el-col>

          <el-col :span="4" class="elCol">
            <el-col :span="5">
              <img src="../../assets/img/jd.png"/>
            </el-col>
            <el-col :span="4" class="marginTop">
              <div class="color">实例数</div>
              <div>coordinator{{topData.coordinatorNum}}/worker{{topData.workerNum}}</div>
            </el-col>
          </el-col>

          <el-col :span="4" class="elCol">
            <el-col :span="5">
              <img src="../../assets/img/nc.png"/>
            </el-col>
            <el-col :span="4" class="marginTop">
              <div class="color">内存</div>
              <div>{{topData.memSysUsed}}G/{{topData.memTotal}}G</div>
            </el-col>
          </el-col>

          <el-col :span="4" class="elCol">
            <el-col :span="5">
              <img src="../../assets/img/cpu.png"/>
            </el-col>
            <el-col :span="4" class="marginTop">
              <div class="color">CPU</div>
              <div>{{topData.cpuUsedNum}}Core/{{topData.cpuTotalNum}}Core</div>
            </el-col>
          </el-col>
        </el-row>
      </el-card>
    </el-row>
    <div style="width:95%;margin:15px 0;display:flex;flex-direction:row;align-items:center;justify-content:flex-end;">
      <el-select size="small"  style="width:100px;margin-right:10px;" v-model="time" placeholder="刷新时间" @change="changeTime">
        <el-option v-for="item in selectTime" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <el-select size="small"  style="width:130px;" multiple v-model="chart" placeholder="选择图表">
        <el-option v-for="item in selectChart" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
    </div>


      <div class="card-box">
        <el-card class="bashbord-wizj" v-loading="loadingEchart" v-show="eChart1">
          <el-row>
            <el-col :span="1"><div style="width: 4px;height: 17px;background-color: #409EFF;"></div></el-col>
            <el-col :span="5" style="line-height: 17px;margin-left: -24px;">实例状态与类型</el-col>
          </el-row>
          <el-row>
            <el-col :span="14">
              <div id="eChart1" class="echart-div" style="margin-top: 30px;margin-left: 130px;">
              </div>
            </el-col>
            <el-col :span="9" style="margin-top: 160px;">

              <el-row :gutter="10">
                <el-col :span="8" style="text-align:right;">worker:</el-col>
                <el-col :span="10">
                  <el-row style="color: #3AC49F">{{hostStatusAndType.worker}}</el-row>
                  <el-row><div class="strip" style="background-color: #3AC49F"></div></el-row>
                </el-col>
              </el-row>
              <el-row :gutter="10" style="margin-top: 20px;">
                <el-col :span="8" style="text-align:right;">coordinator:</el-col>
                <el-col :span="10">
                  <el-row style="color: #409EFF">{{hostStatusAndType.coordinator}}</el-row>
                  <el-row><div class="strip" style="background-color: #409EFF"></div></el-row>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-card>

        <el-card class="bashbord-jqzj" v-loading="loadingEchart" v-show="eChart2">
          <el-row>
            <el-col :span="1"><div style="width: 4px;height: 17px;background-color: #409EFF;"></div></el-col>
            <el-col :span="5" style="line-height: 17px;margin-left: -24px;">集群CPU使用率</el-col>
          </el-row>
          <el-row>
            <div id="eChart2" class="echart-div"></div>
          </el-row>
        </el-card>

        <el-card class="bashbord-jdnc" v-loading="loadingEchart" v-show="eChart3">
          <el-row>
            <el-col :span="1"><div style="width: 4px;height: 17px;background-color: #409EFF;"></div></el-col>
            <el-col :span="5" style="line-height: 17px;margin-left: -24px;">集群内存监控</el-col>
          </el-row>
          <el-row>
            <div id="eChart3" class="echart-div"></div>
          </el-row>
        </el-card>
      </div>
  </div>
</template>


<script>
  import {doGet, doPost} from '@/api/index.js'
  import * as echarts from 'echarts'

  export default {
    data () {
      return {
        hostStatusAndType:{
          'worker':0,
          'coordinator':0,
          'survivalRate':0,
          'mortality':0,
          'total':0
        },
        topData: {},
        selectTime:[{
          value: '0',
          label: '实时'
        },{
          value: '1',
          label: '1小时'
        },{
          value: '2',
          label: '2小时'
        },{
          value: '3',
          label: '6小时'
        },{
          value: '4',
          label: '12小时'
        },{
          value: '5',
          label: '1天'
        },{
          value: '6',
          label: '1周'
        },{
          value: '7',
          label: '1月'
        }],
        time:'0',
        selectChart:
        [
          {
            value: '1',
            label: '实例状态与类型'
          },
          {
            value: '2',
            label: '集群CPU使用率'
          },
          {
            value: '3',
            label: '集群内存监控'
          },
        ],
        chart:[],
        wljjkEchart:null,
        jqqksjEchart:null,
        jdncjkEchart:null,
        loadingEchart:false,
        clock:null,
        clock2:null,
        flag:true,
        cpuResultList:[],
        memoryResultList:[],
      }
    },
    mounted ()
    {
      this.loadingEchart=true;
      this.wljjkEchart = echarts.init(document.getElementById('eChart1'),null,{
        width:210,
        height:210
      });
      this.jqqksjEchart = echarts.init(document.getElementById('eChart2'),null,{
        width:830,
        height:330
      })
      this.jdncjkEchart = echarts.init(document.getElementById('eChart3'),null,{
        width:830,
        height:330
      })

      this.clock=setInterval(()=>
      {
        if(this.flag){
          this.getInfo();
        }
      },1000);
      this.clock2=setInterval(()=>
      {
        this.getEchartsData();
        this.getHostStatusAndType();
      },1000)
    },
    beforeDestroy()
    {
      clearInterval(this.clock)
      this.clock=null
      clearInterval(this.clock2)
      this.clock2=null
    },
    methods: {
      getHostStatusAndType () {
        let apiUrl = '/sys_openlookeng_cluster/getHostStatusAndType'
        doGet(apiUrl, null).then(res => {
          if (res.data.code == 0){
            this.hostStatusAndType=res.data.data;
            this.hostStatusAndType.survivalRate= Math.round(res.data.data.survivalRate/this.hostStatusAndType.total * 100);
            this.hostStatusAndType.mortality= 100 - this.hostStatusAndType.survivalRate;
            this.initEchart1();
          };
        })
      },

      getInfo () {
        let that=this;
        let apiUrl = '/sys_openlookeng_cluster/queryTotalCluster'
        let param = {}
        let _this = this
        that.flag = false
        doGet(apiUrl, param).then((response) => {
          _this.topData = response.data.data
          if (_this.topData.clusterNum == 0) {
            _this.$router.push('/guide')
          }
          setTimeout(()=>{
            that.flag = true;
          },1000)
        })
      },

      changeTime()
      {
        this.cpuResultList=[];
        this.memoryResultList=[];
      },

      initEchart1()
      {
        let that=this;
        let optionWljjkEchart =
        {
          color:['#409EFF','#3AC49F'],
          graphic:
          [
            {
              type: 'text',
              left: '32%',
              top: '60%',
              z: 10,
              style:
              {
                fill: '#333333',
                text: "总数："+ this.hostStatusAndType.total,
                fontSize: 20,
              }
            },
            {
              type: 'text',
              left: 'center',
              top: 'center',
              z: 15,
              style:
                {
                  text: this.hostStatusAndType.survivalRate + "%",
                  fontSize: 26,
                  fill: '#3AC49F',
                  textAlign: 'center',
                }
            }
          ],
          series:
          [
            {
              name: 'Access From',
              type: 'pie',
              radius: ['63%', '80%'],
              avoidLabelOverlap: false,
              hoverAnimation:false,
              emphasis: {
                label: {
                  show: true,
                  fontSize: '40',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [{
                value:this.hostStatusAndType.mortality,
              },{
                value: this.hostStatusAndType.survivalRate,
              }]
            }
          ]
        }
        new Promise((resolve)=>{resolve();}).then(()=>
        {
          that.wljjkEchart.setOption(optionWljjkEchart);
        })
      },

      initEchart2(echartData)
      {
        let that=this;
        let optionJqqksjEchart =
        {
          tooltip: {
            trigger: 'axis',
          },
          xAxis: {
            type: 'category',
            boundaryGap:false,
            axisLabel:
            {
              interval:1,
              formatter:function(value)
              {
                return value.slice(0,11)+"\n"+value.slice(11)
              },
            },
            splitLine: {
              show: false
            }
          },
          yAxis: {
            name:'(单位%)',
            type: 'value',
            max:100
          },
          series: [
            {
              data:echartData,
              type: 'line',
              showSymbol: false,
            }
          ]
        }
        new Promise((resolve)=>{resolve();}).then(()=>
        {
          that.jqqksjEchart.setOption(optionJqqksjEchart);
        })
      },

      initEchart3(echartData)
      {
        let that=this;
        let optionJdncjkEchart =
        {
          tooltip: {
            trigger: 'axis',
          },
          xAxis: {
            type: 'category',
            boundaryGap:false,
            axisLabel:
            {
              interval:1,
              formatter:function(value)
              {
                return value.slice(0,11)+"\n"+value.slice(11)
              }
            },
            splitLine: {
              show: false
            }
          },
          yAxis: {
            name:'(单位%)',
            type: 'value',
            max:100
          },
          series: [
            {
              data:echartData,
              type: 'line',
              showSymbol: false,
            }
          ]
        }
        new Promise((resolve)=>{resolve();}).then(()=>{
          that.jdncjkEchart.setOption(optionJdncjkEchart)
        })
      },

      getEchartsData()
      {
        this.cpuResultList=[];
        this.memoryResultList=[];
        let that = this;
        let url = "/sys_ecs/clusterEchartInfo";
        let obj =
        {
          'nodeId':-1,
          queryType:this.time
        }
        doGet(url, obj).then(res =>
        {
          if(res.data.code==0)
          {
            that.initEchart2(that.formatEchartsData(that.cpuResultList,res.data.data.cpuInfoList));
            that.initEchart3(that.formatEchartsData(that.memoryResultList,res.data.data.menInfoList));
            that.loadingEchart=false;
          }
        })
      },
      formatEchartsData(list,arr)
      {
        if(list.length==0)
        {
          for(let i=0;i<arr.length;i++)
          {
            list.push([arr[i].time,arr[i].value])
          }
        }
        else
        {
          list.splice(0,1);
          list.push([arr[arr.length-1].time,arr[arr.length-1].value])
        }
        return list
      },
    },
    computed:
    {
      eChart1()
      {
        return this.chart.length==0||this.chart.indexOf("1")!==-1
      },
      eChart2()
      {
        return this.chart.length==0||this.chart.indexOf("2")!==-1
      },
      eChart3()
      {
        return this.chart.length==0||this.chart.indexOf("3")!==-1
      },
    },
  }

</script>
<style>
.elCol{
  width: 20%;
  height: 83px;
}
.color{
  font-size: 15px;
  color: #999999 ;
}
.marginTop{
  margin-top: 15px;
}
.strip{
  width: 100px;
  height: 5px;
}
.card-box
{
  width:100%;
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
}
</style>
